<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #btn {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: orangered;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="btn"></div>
<script>
    //  下面有面向对象的
    window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onmousedown = function (e) {
            var e = e || window.event;
            var disX = e.clientX - this.offsetLeft;
            var disY = e.clientY - this.offsetTop;
            this.onmousemove = function (e) {
                var e = e || window.event;
                var litX = e.clientX - disX;
                var litY = e.clientY - disY;
                if (litX < 0) {
                    litX = 0;
                }else if (litX > document.documentElement.clientWidth - this.offsetWidth) {
                    litX = document.documentElement.clientWidth - this.offsetWidth;
                }
                if (litY < 0) {
                    litY = 0;
                }else if (litY > window.innerHeight - this.offsetHeight) {
                    litY = window.innerHeight - this.offsetHeight;
                }
                this.style.left = litX + "px";
                this.style.top = litY + "px";
            }
            this.onmouseup = function () {
                this.onmousemove = null;
            }
        }
    }


//    面向对象的
//    function Drag(id) {
//        this.target = document.getElementById(id);
//        this.disX = 0;
//        this.disY = 0;
//    }
//    Drag.prototype.init = function () {
//        var that = this;
//        this.target.onmousedown = function (e) {
//            e = window.event || e;
//            that.disX = e.clientX - this.offsetLeft;
//            that.disY = e.clientY - this.offsetTop;
//            that.mousedownHandler();
////            return false;
//        }
//    }
//    Drag.prototype.mousedownHandler = function () {
//        var that = this;
//        document.onmousemove = function (e) {
//            e = window.event || e;
//            that.mousemoveHandler(e);
//        }
//        document.onmouseup = function () {
//            that.mouseupHandler();
//        }
//    }
//    Drag.prototype.mousemoveHandler = function(e){
//        var limitX = e.clientX - this.disX;
//        var limitY = e.clientY - this.disY;
//        //限制拖拽的范围，x是横向的，y是纵向的
//        if(limitX < 0){
//            limitX = 0;
//        }else if(limitX > document.documentElement.clientWidth - this.target.offsetWidth){
//            limitX = document.documentElement.clientWidth - this.target.offsetWidth;
//        }
//        if(limitY < 0){
//            limitY = 0;
//        }else if(limitY > document.documentElement.clientHeight - this.target.offsetHeight){
//            limitY = document.documentElement.clientHeight - this.target.offsetHeight;
//        }
//        this.target.style.left = limitX + 'px';
//        this.target.style.top = limitY + 'px';
//    };
//    Drag.prototype.mouseupHandler = function(){
//        document.onmousemove = document.onmouseup = null;
//    };
//
//    var drag = new Drag('target');
//    drag.init();
</script>
</body>
</html>